import { FC } from "react";
import { Button, Typography, Form, Input, Spin } from 'antd';
import { UserRegister } from "../service";
import {LOGIN_PATHNAME} from '../concats'
import style from './pages.module.scss'
import classnames from 'classnames/bind'
import { useRequest } from "ahooks";
import { useNavigate } from "react-router-dom";
const CBN = classnames.bind(style)
const { Title } = Typography






const RegistePages: FC = () => {
    const nav = useNavigate()
    const {run:userRegister,loading} = useRequest((username:string,password:string,nickname:string )=>{
        return UserRegister({username,password,nickname})
    },{
        manual:true,
        onSuccess(){
            //注册成功
            nav(LOGIN_PATHNAME)
        }
    })
    const onFinish = (values: any) => {
        let {username,password,nickname} = values
        if(!nickname) {nickname = username}
        userRegister(username,password,nickname)
    };

    return <div className={CBN('RegistePages')}>
        <Spin tip = "用户注册中。。。" spinning = {loading} className={CBN('registe')}>
            <Title style={{ textAlign: 'center' }}>注册新用户</Title>
            <Form
                name="basic"
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                style={{ maxWidth: 600 }}
                initialValues={{ remember: true }}
                onFinish={onFinish}
            >
                <Form.Item
                    label="用户名"
                    name="username"
                    rules={[
                        { required: true, message: '输入用户名' },
                        { min: 5, message: '用户名不得小于5位' },
                        { pattern: /^\w+$/, message: '不允许输入特殊字符' }
                    ]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="密码"
                    name="password"
                    rules={[{ required: true, message: '输入密码' }]}
                >
                    <Input.Password />
                </Form.Item>


                <Form.Item
                    label="确认密码"
                    name="confirm"
                    dependencies={['password']}
                    rules={[
                        { required: true, message: '再次输入密码' },
                        ({getFieldValue})=>{
                            return {
                                validator(_, value  ) {
                                    if(!value || value === getFieldValue('password') ){
                                        return Promise.resolve()
                                    }else{
                                        return Promise.reject(new Error('两次密码不一致'))
                                    }
                                },
                            }
                        }
                    ]}
                >
                    <Input.Password />
                </Form.Item>

                <Form.Item
                    label="昵称"
                    name="nickname"
                >
                    <Input />
                </Form.Item>


                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button type="primary" htmlType="submit">
                        注册新用户
                    </Button>
                </Form.Item>
            </Form>

        </Spin>
    </div>

}

export default RegistePages